<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>月季年分析总结</title>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/commonJs.jsp" %>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxtoolbar whiteBox actionArea contentbox">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" ms-duplex="searchKey2.startDate"
                       class="layui-input Wdate"
                       onClick="WdatePicker({minDate:'2017-01-01',readOnly:true,maxDate:'%y-%M-{%d-7}'})"/>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" ms-duplex="searchKey2.endDate"
                       class="layui-input Wdate"
                       onClick="WdatePicker({minDate:'2017-01-01',readOnly:true,maxDate:'%y-%M-{%d-1}'})"/>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal layui-btn-small" ms-on-click="searchData()">搜索</button>
            </div>
        </div>
    </div>
    <div class="boxmain whiteBox lrbox" style="margin-top:-90px">
        <div class="lrboxmain borderL" style="margin-left:0%">
            <div class="from-header borderB contentbox">
                <div>
                    <span class="font14"> 所属分类:</span><a id="category"><span class=" fontOrange2">月季年分析总结</span></a>
                    <button class="button blueButton fr" style="margin-right:20px" onclick="exportWord()">导出word
                    </button>
                </div>
            </div>
            <div class="from-body withheader contentbox" style=" overflow: auto;">
                <div style="min-width: 200px; margin:4px auto;font-size: 20px;text-align: center;padding-top: 20px;">
                    {{searchKey.startDate}}~{{searchKey.endDate}}&nbsp;&nbsp;随车机械师作业情况分析
                </div>
                <div style="min-width: 500px; margin:4px auto;padding: 20px;font-size: 16px;line-height:35px">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    {{searchKey.startDate}}~{{searchKey.endDate}}日,平均分统计如下：
                    得分为90-100的有{{trainScore.numOf90_100}}人，得分80-90的有{{trainScore.numOf80_90}}人，得分70-80的有{{trainScore.numOf70_80}}人，
                    得分60-70的有{{trainScore.numOf60_70}}人，60分以下的有{{trainScore.numOfBelow60}}人。
                    其中最高分为{{trainScore.maxScore}}分，得分为{{trainScore.maxScore}}分的机械师分别为{{trainScore.maxScoreUser}}。
                    最低分为{{trainScore.minScore}}分，得分为{{trainScore.minScore}}分的机械师分别为{{trainScore.minScoreUser}}。具体变化折线图如下所示：
                </div>
                <div id="count" style="width: 90%; height:450px; margin: 0px auto">

                </div>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            tableDatas: [],//图片数据
            dateStrs: [],
            scores: [],
            trainScore: {},
            searchKey: {
                startDate: '${startDate}',
                endDate: '${endDate}',
            },
            searchKey2: {
                startDate: '${startDate}',
                endDate: '${endDate}',
            }
        })
        avalon.scan();
        loadData();
        loadScoreData();
    });

    function searchData() {
        vm.searchKey = vm.$model.searchKey2;
        loadData();
        loadScoreData();
    }

    //查询分数数据
    function loadScoreData() {
        var dataStr = $.param(vm.$model.searchKey);
        $.ajax({
            type: 'post',
            url: '${ctx}/countMonthController/selectDateSpanAvgScore.action',
            data: dataStr,
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                vm.trainScore = data.data;
            }
        });

    }

    //加载数据
    function loadData() {
        var dataStr = $.param(vm.$model.searchKey);
        $.ajax({
            type: 'post',
            url: '${ctx}/countMonthController/selectDateSpanScore.action',
            data: dataStr,
            beforeSend: function () {
                layui.layer.msg('正在加载...', {time: 0, icon: 16, shade: 0.02});
            },
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                closeDialog();
                if (data.code == 0) {
                    vm.dateStrs = data.dateStrs;
                    vm.scores = data.scores;
                    showChart();
                } else if (data.code == -2) {
                    layui.layer.msg('查询的时间段至少为7天', {icon: 2, anim: 6});
                }
            }
        });

    }

    //导出word
    function exportWord() {

        window.location.href = "${ctx}/countMonthController/exportWord.action?startDate=" + vm.$model.searchKey.startDate + "&endDate=" + vm.$model.searchKey.endDate;

    }

    function showChart() {
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['分数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: vm.$model.dateStrs
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '分数',
                    type: 'line',
                    stack: '总量',
                    data: vm.$model.scores
                }
            ]
        };
        showBar(option, "count");
    }
</script>
</body>
</html>